<template>
  <div id="tmpl">
  
    <mt-swipe :auto="2000">
  
      <mt-swipe-item v-for="(item,index) in list" :key="index">
  
        <img :src="item.img" alt="">
  
      </mt-swipe-item>
  
    </mt-swipe>
  
  
  
    <!-- 利用mui的9宫格实现导航区域 -->
  
    <div class="mui-content">
  
      <ul class="mui-table-view mui-grid-view mui-grid-9">
  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
  
          <router-link to="/news/newlist">
  
            <span class="mui-icon mui-icon-home"></span>
  
            <div class="mui-media-body">新闻资讯</div>
  
          </router-link>
  
        </li>
  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
  
          <router-link to="/photos/photolist">
  
            <span class="mui-icon mui-icon-email"></span>
  
            <div class="mui-media-body">图片分享</div>
  
          </router-link>
  
        </li>
  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
  
          <router-link to="/goods/goodslist">
  
            <span class="mui-icon mui-icon-chatbubble"></span>
  
            <div class="mui-media-body">商品购买</div>
  
          </router-link>
  
        </li>
  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
  
          <router-link to="/feedback">
  
            <span class="mui-icon mui-icon-location"></span>
  
            <div class="mui-media-body">留言反馈</div>
  
          </router-link>
  
        </li>
  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
  
          <router-link to="/video">
  
            <span class="mui-icon mui-icon-search"></span>
  
            <div class="mui-media-body">视频专区</div>
  
          </router-link>
  
        </li>
  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
  
          <router-link to="/callme">
  
            <span class="mui-icon mui-icon-phone"></span>
  
            <div class="mui-media-body">联系我们</div>
  
          </router-link>
  
        </li>
  
      </ul>
  
    </div>
  
  
  
  
  
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      list: []
    };
  },

  created() {
    this.getImgs();
  },

  methods: {
    getImgs() {
      //实现轮播图组件中的数据请求

      //确定url

      var url = this.$common.apidomain + "/api/getlunbo";

      //调用$http.get()

      this.$http.get(url).then(function(response) {
        var data = response.body;

        if (data.status != 0) {
          Toast(data.message);

          return;
        }

        //如果服务器返回的数据正常,则赋值给list

        this.list = data.message;
      });
    }
  }
};
</script>

<style scoped>
.mint-swipe {
  height: 300px;
}

.mint-swipe-item {
  background-color: red;

  width: 100%;

  height: 300px;
}

.mint-swipe-item img {
  width: 100%;

  height: 300px;

  display: block;
}

.mui-content,
.mui-content ul {
  background-color: #fff;
}

.mui-grid-view.mui-grid-9 {
  border: 0;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}

.mui-content > .mui-table-view:first-child {
  margin-top: 0;
}

/* 导航栏图标 */

.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before {
  content: "";

  display: inline-block;

  width: 50px;

  height: 50px;

  /* background-size: cover; */

  background-repeat: round;
}

.mui-icon-home:before {
  background-image: url("../../statics/imgs/1.png");
}

.mui-icon-email:before {
  background-image: url("../../statics/imgs/2.png");
}

.mui-icon-chatbubble:before {
  background-image: url("../../statics/imgs/3.png");
}

.mui-icon-location:before {
  background-image: url("../../statics/imgs/4.png");
}

.mui-icon-search:before {
  background-image: url("../../statics/imgs/5.png");
}

.mui-icon-phone:before {
  background-image: url("../../statics/imgs/6.png");
}
</style>


